<script setup>
import { ref } from 'vue';
const visible = ref(false)
const showToast =()=>{
  visible.value = !visible.value
}
</script>
<template>
  <button @click="showToast">打开toast</button>
  <!-- 在组件中使用传送门 -->
  <teleport to='#target'>
    <div class="wrap" v-if="visible">
      <p>我是Toast内容</p>
    </div>
  </teleport>
  
</template>

<style scoped>
.wrap{
  background-color: lightpink;
  font-size: 0.24rem;
  width: 3rem;
  margin: 0 auto;
  text-align: center;
}
</style>

